<template>
  <div v-if="showComponent" class="mark-item-attr" :class="{ show: showAttr }">
    <div class="title">标注详情</div>
    <div class="mark-item__body my-scrollbar">
      <div class="tag-name-box">
        <div class="name">名称</div>
        <a-select
          :key="selectedObj?.uid"
          v-model:value="selectId"
          class="select"
          :options="tagList"
          :field-names="{ label: 'name', value: 'id' }"
          @change="handleChange"
        />
      </div>

      <div v-if="selectedObj" class="attr-list">
        <div v-for="attr in selectedObj.markTagInfo.attributeList" :key="attr.id" class="attr-item">
          <a-tooltip :mouse-enter-delay="0.5">
            <template #title> {{ attr.name }}</template>
            <div class="attr-name">
              {{ attr.name }}
            </div>
          </a-tooltip>
          <template v-if="currentEditAttrId === attr.id">
            <a-input v-model:value="attr.value" v-trim class="a-input" :maxlength="20" @press-enter="currentEditAttrId = ''" />
          </template>
          <template v-else>
            <a-tooltip :mouse-enter-delay="0.5">
              <template #title> {{ attr.value || '/' }}</template>
              <div class="attr-value">
                {{ attr.value || '/' }}
              </div>
            </a-tooltip>
            <a-button class="icon-only-btn" @click="editAttrId(attr.id)">
              <i class="iconfont icon-edit-line"></i>
            </a-button>
          </template>
        </div>
      </div>
    </div>

    <footer class="fc" @click="showAttr = !showAttr">
      <i :class="['iconfont', showAttr ? 'icon-arrow-up-s-line' : 'icon-arrow-down-s-line']"></i>
    </footer>
  </div>
</template>

<script setup lang="ts">
  import { useEventListener } from '@vueuse/core'
  import { nextTick, ref, watch } from 'vue'

  import { MarkObj, TaskTag } from '../../types'

  export interface Props {
    showComponent: boolean
    tagList: TaskTag[]
    selectedObj: MarkObj | null | undefined
  }

  const props = withDefaults(defineProps<Props>(), {})

  const emits = defineEmits(['changeSelectObjTag'])

  const showAttr = ref(true)
  const selectId = ref('')
  const currentEditAttrId = ref('')

  watch(
    () => props.selectedObj,
    (val, oldVal) => {
      if (!props.showComponent) {
        return
      }
      selectId.value = val.markTagInfo.id
      // 切换图形则清除当前选中id
      if (val !== oldVal) {
        currentEditAttrId.value = ''
      }
    },
    { immediate: true, deep: true }
  )

  const handleChange = (tagId: string) => {
    const tag = props.tagList.find(tag => tag.id === tagId) as TaskTag
    console.log(tag)
    const markTagInfo = {
      ...tag,
      attributeList: (tag.attributeList || []).map(attr => ({ ...attr, value: '' }))
    }
    emits('changeSelectObjTag', markTagInfo)
  }

  const editAttrId = async (attrId: string) => {
    currentEditAttrId.value = attrId
    await nextTick()
    const input = document.querySelector('.attr-item .a-input') as HTMLElement
    input.addEventListener('keydown', event => event.stopPropagation())
    input.focus()
  }

  useEventListener(
    document,
    'click',
    event => {
      if (!props.showComponent) {
        return
      }
      const input = document.querySelector('.attr-item .a-input')
      if (!input) {
        return
      }
      if (input?.contains(event.target as Node)) {
        return
      }
      currentEditAttrId.value = ''
    },
    true
  )
</script>

<style lang="less" scoped>
  @import '@/styles/index';

  .mark-item-attr {
    display: flex;
    overflow: hidden;
    padding-top: 12px;
    width: 284px;
    background-color: #fff;
    border-radius: 0 0 2px 2px;
    transition: all 0.3s;
    transform: translateY(-356px);
    flex-direction: column;
    border-bottom-left-radius: 6px;
    border-top: 1px solid @border1;

    .title {
      padding: 0 12px;
      height: 22px;
      color: @text02;
      .font14b();
    }

    .mark-item__body {
      display: flex;
      overflow: hidden auto;
      padding: 12px 0;
      width: 100%;
      height: 322px;
      flex-direction: column;

      .tag-name-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        max-width: 100%;

        .name {
          min-width: 70px;
        }

        .ant-select {
          flex: 1;
          width: 190px;
        }
      }

      .attr-list {
        margin-top: 20px;

        .attr-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 12px;
          width: 100%;
          height: 44px;

          .attr-name {
            margin-right: 10px;
            width: 70px;
            min-width: 70px;
            max-width: 70px;
            .elliptical-1();
          }

          .attr-value {
            flex: 1;
            text-align: left;
            .elliptical-1();
          }

          .icon-only-btn {
            display: none;
            margin-left: 8px;
          }

          &:hover {
            background-color: @background3;

            .icon-only-btn {
              display: flex;
            }
          }

          & + .attr-item {
            margin-top: 12px;
          }
        }
      }
    }

    &.show {
      transform: translateY(0);
    }

    footer {
      width: 100%;
      height: 20px;
      background: @background3;
      background-color: #ccc;
      border: 1px solid @border2;
      border-radius: 2px;
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
      cursor: pointer;
    }
  }
</style>
